<script setup lang="ts">
import { ref } from 'vue'
import home from './home.vue'
import member from './member.vue'
import order from './order.vue'
import zitiorder from './zitiorder.vue'
import tongji from './tongji.vue'
import other from './other.vue'
import msgModal from '../components/msgModal.vue'
import distribution from '../components/distribution.vue'
const msgModalRef = ref(msgModal);
const showModal = (title,times=1000) => {
	if(msgModalRef.value){
		msgModalRef.value.openMsg(title,times);
	}
}
const homeRef = ref(home);
let homerouter = ref(1),title = ref(''),logoutTitle = ref('确定退出吗？');
const jump = (index:number)=>{
	homerouter.value = index;
}
let shoptitle:string | null = localStorage.getItem('title'),logoutShow = ref(false);

if (shoptitle !== null) {
	title.value = shoptitle;
}
const logout = ()=>{
	window.electron.ipcRenderer.send('logout');
}
const logouttip = () => {
    logoutShow.value = true;
    let outListNum = localStorage.getItem('outListNum');
    if (outListNum !== null && parseInt(outListNum, 10) > 0) {
        logoutTitle.value = '还有挂单未处理，确定退出吗？';
    }
}
const updateData = () =>{
	if(homeRef.value){
		homeRef.value.getShopCate();
		homeRef.value.initPos();
		showModal('更新成功',1000);
	}
}
</script> 
<template>
	<main class="homepagemain">
		<msgModal ref="msgModalRef"/>
		<Transition name="msgTitlefade">
            <div class="msgTitleShowModel" v-show='logoutShow'>
                <div class="modelInfo">
                    <div class="info">
                        {{logoutTitle}}
                    </div>
                    <div class="footer">
                        <el-button @click="logout" class="deleteGood">确定</el-button>
                        <el-button @click="logoutShow = false" class="cancel">取消</el-button>
                    </div>
                </div>
            </div>
        </Transition>
		<div class="homeleft">
			<img src="../assets/logo.jpg" alt="" class="img">
			<div class="title">{{ title }}</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 1 }" @click="jump(1)">
				<img src="../assets/icon1.png" class="logo" alt="">
				<span class="icontitle">结算</span>
			</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 2 }" @click="jump(2)">
				<img src="../assets/icon2.png" class="logo" alt="">
				<span class="icontitle">会员</span>
			</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 3 }" @click="jump(3)">
				<img src="../assets/icon3.png" class="logo" alt="">
				<span class="icontitle">查单</span>
			</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 4 }" @click="jump(4)">
				<img src="../assets/icon5.png" class="logo" alt="">
				<span class="icontitle">自提</span>
			</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 7 }" @click="jump(7)">
				<img src="../assets/icon10.png" class="logo" alt="">
				<span class="icontitle">配送</span>
			</div>
			<div class="home" v-bind:class="{  'selected': homerouter == 5 }" @click="jump(5)">
				<img src="../assets/icon7.png" class="logo" alt="">
				<span class="icontitle">统计</span>
			</div>
			<div class="home"  @click="updateData">
				<img src="../assets/icon8.png" class="logo" alt="">
				<span class="icontitle">同步</span>
			</div>
			<div class="home"  v-bind:class="{  'selected': homerouter == 6 }" @click="jump(6)">
				<img src="../assets/icon9.png" class="logo" alt="">
				<span class="icontitle">设置</span>
			</div>
			<div class="home"  @click="logouttip()">
				<img src="../assets/icon6.png" class="logo" alt="">
				<span class="icontitle">退出</span>
			</div>
		</div>
		<div class="right">
			<home v-show="homerouter == 1" ref="homeRef"/>
			<member v-if="homerouter == 2" />
			<order v-if="homerouter == 3" />
			<zitiorder v-if="homerouter == 4" />
			<tongji v-if="homerouter == 5" />
			<other v-if="homerouter == 6" />
			<distribution v-if="homerouter == 7" />
		</div>
    </main>
</template>
<style lang="scss">
#app{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	display: block;
}
html{
	width: 100%;
	height:100%;
}
body{
	width:100%;
	height:100%;
	padding: 0;
    margin: 0;
	display: block;
}
.msgTitlefade-enter-active, .msgTitlefade-leave-active {
	transition: opacity 0.3s;
}
.msgTitlefade-enter-from, .msgTitlefade-leave-to {
	opacity: 0;
}
.homepagemain{
	width:100%;
    height: 100%;
    background-color: #eaeef7;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color:black;
	.homeleft{
		color:#a8a8a8;
		display: grid;
		align-content: start;
		width:10%;
		text-align: center;
		background-color: #2a2b2d;
		padding-top:20px;
		height:100%;
		.img{
			width:50%;
			margin:auto;
			border-radius: 50%;
		}
		.title{
			text-align: center;
			padding: 20px;
			color:#fff;
		}
		.selected{
			background-color: #4341418a;
		}
		.home{
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			height:60px;
			padding-left:20px;
			.logo{
				width:25px;
				height:25px;
				margin: auto 10px;
			}
			.icontitle{
				text-align: left;
				width: 50%;
				display: contents;
				padding-left:20px;
			}
		}
	}
	.right{
		height:100%;
		width:90%;
	}
	.msgTitleShowModel{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index:11;
        .modelInfo{
            position: absolute;
            width:40%;
            height:19%;
            background: #fff;
            border-radius: 10px;
            border:2px solid #9b9ea32e;
            .info{
                width: 100%;
                height: 40%;
                background: #ffffff;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #2a2b2d;
                font-size: 20px;
                font-weight: 600;
            }
            .footer{
                display: flex;
                width: 100%;
                height: 60%;
                align-items: end;
                padding: 10px;
                font-size: 30px;
                .cancel{
                    height:100%;
                    width:50%;
                    background-color: #5a5f73;
                    border:1px solid #2a2b2d;
                    color:#fff;
                    display: grid;
                    font-size: 20px;
                }
                .deleteGood{
                    height:100%;
                    width:50%;
                    background-color: #5a5f73;
                    border:1px solid #2a2b2d;
                    color:#fff;
                    display: grid;
                    font-size: 20px;
                }
            }
        }
        
    }
}

</style>